<template>
    <div class="main">
      <DragList></DragList>
      <DragDesigner></DragDesigner>
    </div>
  </template>
  
  <script setup>
  // import DraggableContainer from './components/DraggableContainer.vue'
  import {ref} from 'vue'
  import DragList from '@/components/dragCom/dragList/index.vue'
  import DragDesigner from '@/components/dragCom/dragDesigner/index.vue'
  const lists = ref([
    { id: 1, name: 'Project 1' },
    { id: 2, name: 'Project 2' },
    { id: 3, name: 'Project 3' }
  ])
  const dragOptions = ref({
    animation: 200,
    group: 'projects'
  })
  
  </script>
  <style scoped lang="scss">
  .main {
      width: 500px;
      display: flex;
      justify-content: space-between;
  }
  
  
  
  </style>